<template>
	<view class="friendpage">
		<image class="image" src="/static/image/素材.png" mode=""></image>
		<view class="title">
			   邀请亲友关注，共同见证健康进程
		</view>
		<view class="line">
			<view class="yuan">
				<view class="iconfont icon-saoyisao">
					 
				</view>
			</view>
			<view class="infobox">
				<view class="name">
					扫码添加
				</view>
				<view class="label">
					扫描对方二维码
				</view>
			</view>
		</view>
		<view class="line" @click="winshow=true">
			<view class="yuan act">
				<view class="iconfont icon-fenxiang01">
					 
				</view>
			</view>
			<view class="infobox">
				<view class="name">
					分享我的二维码
				</view>
				<view class="label">
					分享到微信
				</view>
			</view>
		</view>
		
		<view class="winpage" v-if="winshow" @click="winshow=false">
			<view class="win">
				  <view class="iconfont icon-guanbi" @click="winshow=false">
				  	
				  </view>
				  
				  <view class="imgbox">
				  	<image src="https://changban.dianjingkeji.net/img/微信图片_20230817153730.jpg" mode=""></image>
				  </view>
				  <view class="title">
				  	王计东邀请您关注
				  </view>
				  <view class="title">
				  	共同见证健康进程
				  </view>
				  <view class="mabox">
				  	<image src="/static/image/微信图片_20250319172458.png" mode=""></image>
				  </view>
				  <view class="btnline">
				  	<view class="itembtn" @click.stop="fenxiang">
				  		<view class="iconfont icon-a-fenxiangweifenxiang">
				  			
				  		</view>
						<view class="btnname">
							分享亲友
						</view>
				  	</view>
					<view class="itembtn"  @click.stop="save">
						<view class="iconfont icon-xiazai">
							
						</view>
						<view class="btnname">
							保存图片
						</view>
					</view>
				  </view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				winshow:false
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less" scoped>
  .friendpage{
	  width: 750rpx;
	  box-sizing: border-box;
	  padding: 20rpx;
	  background-color: whitesmoke;
	  .image{
		  width: 700rpx;
		  height: 650rpx;
		  margin: auto;
	  }
	  .title{
		  text-align: center;
	  }
	  .line{
		  width: 92%;
		  margin: auto;
		  box-sizing: border-box;
		  background-color: white;
		  border-radius: 20rpx;
		  padding: 20rpx;
		  margin-top: 50rpx;
		  display: flex;
		  align-items: center;
		  .yuan{
			  width: 100rpx;
			  height: 100rpx;
			  border-radius: 50%;
			  text-align: center;
			  line-height: 100rpx;
			  color: white;
			  margin-right: 30rpx;
			  background-color: #1a4f8a;
			  .iconfont{
				  font-size: 50rpx;
				  margin: auto;
			  }
		  }
		  .act{
			  background-color: #2BA700 !important;
		  }
		  .infobox{
			  line-height: 2.1;
			  .name{
				  font-weight: bold;
			  }
			  .label{
				  font-size: 30rpx;
			  }
		  }
	  }
	  .winpage{
		  width: 750rpx;
		  height: 100vh;
		  background-color: rgba(0, 0, 0, 0.5);
		  position: fixed;
		  top: 0;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  .win{
			  width: 100%;
			  height: 60vh;
			  position: absolute;
			  bottom: 0;
			  right: 0;
			  background-color: white;
			  box-sizing: border-box;
			  border-top-right-radius: 20rpx;
			  border-top-left-radius: 20rpx;
			  .iconfont{
				  position: absolute;
				  right: 20rpx;
				  top: 20rpx;
			  }
			  .imgbox{
				  width: 100rpx;
				  height: 100rpx;
				  border-radius: 50%;
				  margin: 50rpx auto;
				  image{
					  width: 100%;
					  height: 100%;
					  border-radius: 50%;
					  
				  }
			  }
			  .title{
				  text-align: center;
			  }
			  .mabox{
				  width: 300rpx;
				  height: 300rpx;
				  margin: auto;
				  image{
					  width: 100%;
					  height: 100%;
				  }
			  }
			  .btnline{
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				.itembtn{
					width: 150rpx;
					height: 150rpx;
					border-radius: 30rpx;
					background-color: whitesmoke;
					text-align: center;
					box-sizing: border-box;
					padding: 20rpx;
					font-size: 24rpx;
					.iconfont{
						color: #2BA700;
						position: static;
						font-size: 40rpx;
						margin: 10rpx;
					}
				}
			  }
		  }
	  }
  }
</style>
